<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>向上的箭头</title>
    <style>
        body {
            background: #000
        }

        #canvas {
            border: 1px solid #fff;
            display: block;
            margin: 50px auto;
            background: #ffffff
        }
    </style>
</head>
<body>
    <div id="canvas-warp">
        <canvas id="canvas">
            您的浏览器暂不支持Canvas.
        </canvas>
    </div>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            canvas.width = 800;
            canvas.height = 800;

            var context = canvas.getContext("2d");
            context.beginPath();
            context.rect(0,0,400,400);
            context.stroke();

            context.moveTo( 200 , 100);
            context.lineTo( 100 , 150);
            context.lineTo( 150 , 150);
            context.lineTo( 150 , 300);
            context.lineTo( 250 , 300);
            context.lineTo( 250 , 150);
            context.lineTo( 300 , 150);
            context.lineTo( 200 , 100);

            context.closePath();

            context.fillStyle = "#058";
            context.fill();
        }
    </script>
</body>
</html>